import React from 'react'
import {
  RiArrowDownCircleLine,
  RiArrowUpCircleLine,
  RiArrowDownLine,
  RiArrowDownDoubleLine,
  RiArrowUpDoubleLine,
} from '@remixicon/react'
import Collapse from '@/library/gallery/components/Collapse'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { sleep } from '../button'

const generateRandomString = (length: number): string => {
  let result = ''
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length)
    result += characters.charAt(randomIndex)
  }
  return result
}

const mockContents = Array(5)
  .fill(null)
  .map(() => generateRandomString(200))

const DynamicContent = () => {
  const [finished, setFinished] = React.useState(false)

  React.useEffect(() => {
    const loadData = async () => {
      await sleep(1000)
      setFinished(true)
    }
    loadData()
  }, [])

  return finished ? (
    <div>{mockContents[0]}</div>
  ) : (
    <div>...</div>
  )
}

export default (): React.ReactNode => (
  <>
    <DemoBlock title="基础用法" padding="0">
      <Collapse defaultActiveKey={['1', '2']} onChange={(v) => { console.warn(v) }}>
        <Collapse.Panel key="1" title="第一项" immediate>
          {mockContents[0]}
        </Collapse.Panel>
        <Collapse.Panel key="2" title="第二项" destroyOnClose>
          {mockContents[1]}
        </Collapse.Panel>
        <Collapse.Panel key="3" title="第三项">
          {mockContents[2]}
        </Collapse.Panel>
      </Collapse>
    </DemoBlock>

    <DemoBlock title="手风琴模式" padding="0">
      <Collapse accordion onChange={(v) => { console.warn(v) }}>
        <Collapse.Panel key="1" title="第一项">
          手风琴模式只能同时展开一个
        </Collapse.Panel>
        <Collapse.Panel key="2" title="第二项" disabled>
          手风琴模式只能同时展开一个
        </Collapse.Panel>
        <Collapse.Panel key="3" title="第三项">
          手风琴模式只能同时展开一个
        </Collapse.Panel>
      </Collapse>
    </DemoBlock>

    <DemoBlock title="自定义折叠图标" padding="0">
      <Collapse
        defaultActiveKey={['1']}
        arrow={(active) => { console.warn(active); return active ? <RiArrowUpCircleLine /> : <RiArrowDownCircleLine /> }}
      >
        <Collapse.Panel key="1" title="第一项">
          你可以通过 Collapse 的 arrow 属性来控制全部面板的箭头
        </Collapse.Panel>
        <Collapse.Panel
          key="2"
          title="第二项"
          arrow={<RiArrowDownLine />}
        >
          也可以通过 Collapse.Panel 的 arrow 属性来自定义单个面板的箭头
        </Collapse.Panel>
        <Collapse.Panel
          key="3"
          title="第三项"
          arrow={(active) => (active ? <RiArrowUpDoubleLine /> : <RiArrowDownDoubleLine />)}
        >
          如果你给 arrow 属性传入的是是一个渲染函数，
          不会为你增加动画，arrow 属性的效果就完全交由你自己来控制了
        </Collapse.Panel>
      </Collapse>
    </DemoBlock>

    <DemoBlock title="动态内容" padding="0">
      <Collapse accordion>
        <Collapse.Panel key="1" title="第一项">
          <DynamicContent />
        </Collapse.Panel>
        <Collapse.Panel key="2" title="第二项">
          <DynamicContent />
        </Collapse.Panel>
      </Collapse>
    </DemoBlock>
  </>
)
